<!--
 * @Author: luohongbiao
 * @Date: 2022-02-22 10:37:55
 * @LastEditTime: 2022-02-23 10:11:27
 * @LastEditors: luohongbiao1
 * @Description: 
 * @FilePath: \face_problem\2021-02-07\2.深拷贝和浅拷贝.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 浅拷贝：就是基本数据类型的赋值，是值传递,对对象来说,就是地址的拷贝
        // 实现方式
        // 1、 =号赋值
        // 2、
        let oob = Object.assign({
            'name': 'lhb'
        })


        // 深拷贝：由于js复杂数据类型是按引用赋值的，当改一个对象的属性，其他对象的属性也变了，这时候需要用深拷贝。
        // 也就是完全赋值一个对象
        // 1、手动复制
        var obj1 = {
            a: 10,
            b: 20,
            c: 30
        }
        var obj2 = {
            a: obj1.a,
            b: obj1.b,
            c: obj1.c
        }
        obj2.b = 100
        console.log(obj1)
        console.log(obj2)

        // 2、json字符串转换  会丢失function的拷贝
        var obj3 = {
            body: {
                a: 10
            },
            sayName: function() {
                console.log("sayName")
            }
        }
        var obj4 = JSON.parse(JSON.stringify(obj3))
        obj4.a = 20
        console.log(obj3)
        console.log(obj4)

        // 3、递归拷贝
        function deepClone(initalObj, finalObj) {
            var obj = finalObj || {};
            for (var i in initalObj) {
                var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
                if (prop === obj) {
                    continue;
                }
                if (typeof prop === 'object') {
                    obj[i] = (prop.constructor === Array) ? [] : {};
                    arguments.callee(prop, obj[i]);
                } else {
                    obj[i] = prop;
                }
            }
            return obj;
        }
        var str = {};
        var obj = {
            a: {
                a: "hello",
                b: 21
            }
        };
        deepClone(obj, str);
        console.log(str.a);

        // 使用Object.create()
        var obj5 = {
            body: {
                a: 10
            },
            sayName: function() {
                console.log("sayName")
            }
        }
        var obj6 = Object.create(obj5)
        console.log('---')
        console.log(obj5)
        console.log(obj6)
    </script>
</body>

</html>